<template>
  <div class="page_staffRollCall">
    <van-nav-bar :title="title" left-arrow @click-left="$router.back()" />

    <!--    <van-notice-bar
      left-icon="volume-o"
      wrapable
      scrollable
    >
      {{ '若提示近聘报名的用户无需设置渠道信息，请清空后再提交' }}
    </van-notice-bar>-->

    <com-job-item :jobItem="needObj" :keyWord="'home'" :serchType="1" :routeName="$route.name"></com-job-item>

    <van-divider :style="{color: '#1989fa', borderColor: '#1989fa', padding: '0 60px', fontWeight: 'bolder'}">
      {{ '进行' + title + '登记统计' }}
    </van-divider>

    <div style="display:flex;align-items: center;background:#fff;">
      <!-- <van-row>
        <van-col span="10">
          <van-cell :title="title + '码'" :value="verCode" size="large" label="" />
        </van-col>
        <van-col span="18">
          <van-field type="number" autocomplete="off" v-model="bdvalue" :placeholder="`请输入${title}码`" />
        </van-col>
        <van-col span="6" style="padding-top:10px" v-show="qodeType == '5'">
          <van-button plain type="primary" size="mini" @click="changeState()">确定</van-button>
        </van-col>
      </van-row> -->
      <span style="width:130px;margin-left:8px;font-size:14px">{{title}}码</span>
      <van-field style="width:200px" type="number" autocomplete="off" v-model="bdvalue" :placeholder="`请输入${title}码`" />
      <van-button v-show="qodeType == '5'" plain type="primary" size="mini" @click="changeState()">确定</van-button>
    </div>

    <div style="display:flex" v-show="qodeType == '5'">
      <van-cell title="渠道公司" :value="verCode" size="large" label="" />
      <van-field autocomplete="off" v-model="qdCompany" />
    </div>
    <div style="display:flex" v-show="qodeType == '5'">
      <van-cell title="渠道人" :value="verCode" size="large" label="" />
      <van-field autocomplete="off" v-model="qdName" />
    </div>

    <div style="display:flex" v-if="qodeType === '6'">
      <!-- <van-field
        autocomplete="off"
        clearable
        label="渠道名称"
        v-model="qdvalue"
        placeholder="请输入您报名的中介、公司或平台名称"
      /> -->
    </div>
    <!-- <div class="userWorkbench">
      <van-row class="avatar_login">
        <van-col span="8" class="userImg">
          <van-image
            class="img"
            width="90"
            height="90"
            :src="allUserInfo.avatar ? allUserInfo.avatar : logoImg"
            round
            fit="cover"
          />
        </van-col>
        <van-col span="9" class="userLogin">
          <div class="isLogin" v-if="!allUserInfo.id" @click="$router.push('/login')">未登录, 请先登录</div>
          <template v-else>
            <div class="nick_name">近聘昵称: {{ allUserInfo.nick_name || '近聘' }}</div>
            <div class="account">近聘账号: {{ allUserInfo.ids || '近聘' }}</div>
            <div class="account">手机号: {{ allUserInfo.mobile || '' }}</div>
          </template>
        </van-col>
        <van-col span="7" class="userDetail">
          <div class="myFile" @click="checkOut">切换账号 ></div>
        </van-col>
      </van-row>
    </div> -->
    <div style="margin: 16px;">
      <van-button round block type="info" @click="reqCodeNum()">提交</van-button>
    </div>
  </div>
</template>

<script>
import {payMoneyModeObj} from '../../constants/payMoneyMode'
import {feeUnitObj} from '../../constants/comUtils'
import jobCategoryObj from '../../constants/jobCategoryObj'
import {Toast, Dialog} from 'vant'

import comJobItem from '../../components/comJobItem'
import {mapGetters} from 'vuex'

import logoImg from '@/assets/logo.png'
import router from '../../router'

export default {
  name: 'staffRollCall',
  components: {
    comJobItem
  },
  computed: {
    computedRecruitStatus() {
      switch (this.jobItem.status) {
        case 0:
          return '默认'
        case 1:
          return '在招'
        case 2:
          return '停招'
      }
    },
    computedRecruitColor() {
      switch (this.jobItem.status) {
        case 0:
          return '#1989FA'
        case 1:
          return '#36D7B7'
        case 2:
          return '#EE0A24'
      }
    },
    ...mapGetters(['allUserInfo']),

    computedMoneyModeText() {
      const res2 = this.payMoneyModeObj[this.jobItem.payway_id]
      if (res2) {
        const res_job = res2.split('+')
        if (this.jobItem.second_value_input && this.jobItem.third_value_input) {
          return (
            res_job[0].trim() +
            this.jobItem.first_value_input +
            ' + ' +
            res_job[1].trim() +
            this.jobItem.second_value_input +
            ' + ' +
            res_job[2].trim() +
            this.jobItem.third_value_input
          )
        } else if (this.jobItem.second_value_input) {
          return (
            res_job[0].trim() +
            this.jobItem.first_value_input +
            ' + ' +
            res_job[1].trim() +
            this.jobItem.second_value_input
          )
        } else {
          return res_job[0].trim() + this.jobItem.first_value_input
        }
      }
    }
  },
  data() {
    return {
      label: '每天00点自动更新',
      logoImg,
      feeUnitObj,
      payMoneyModeObj,
      jobCategoryObj,
      bdvalue: '',
      qdCompany: '',
      qdName: '',
      qdvalue: '',
      title: '',
      dataType: '',
      qodeType: '',
      needObj: {},
      jobItem: {},
      showAction: false,
      actions: [{name: '短信发送'}, {name: '平台发送'}],
      verCode: '',
      typeList: ['qudaocode','baodaocode',  'jiesongcode', 'daoqicode', 'fxscode', 'peixuncode', 'hetongcode'],
      keyWord: 'recruitmentManagement'
    }
  },

  async created() {
    this.dataType = this.$route.query
    // id:5(报到点名), 6(渠道来源)
    // 7(接送点名),8(到用企点名),9(分宿舍点名),10(培训点名), 11(合同协议),
    if (this.$route.query.qodeType) {
      let id = this.$route.query.qodeType
      console.log(id)
      const qrCodeTypeObj = {
        '5': '线下报名渠道来源',
        '6': '报到点名',
        '7': '接送点名',
        '8': '到用企点名',
        '9': '分宿舍点名',
        '10': '培训点名',
        '11': '合同协议'
      }
      this.qodeType = id
      this.title = qrCodeTypeObj[id]
    }
    this.getDetails(this.$route.query.job_id)
  },

  methods: {
    async getDetails(id){
      let _self = this
      const {data} = await _self.$api.job.reqJobDetailObj(id)
      _self.jobItem = data
      _self.needObj = data
    },
    async changeState(){
      let _self = this
      if (!_self.bdvalue) {
        Toast(`请输入${_self.title}码`)
        return null
      }
      
      if (_self.$route.query.qodeType == '5') {
        const {data} = await _self.$api.company.getinfo({
          job_id: _self.$route.query.job_id,
          work_num:_self.bdvalue
        })
        // if (!data.items.channel_name) {
        //   Toast(`当前工作未设置渠道来源`)
        // }
        _self.qdCompany = data.items.channel_name
        _self.qdName = data.items.channel_emp_name
      }
    },
    // 切换账号
    checkOut() {
      this.$router.push({
        path: '/login',
        // 需要携带参数
        query: {
          redirect: this.$router.currentRoute.fullPath
        }
      })
    },

    // 发送
    async reqCodeNum() {
      if (!this.bdvalue) {
        Toast(`请输入${this.title}码`)
        return null
      }

      if (this.qodeType === '5' && !this.qdCompany.trim()){
        Toast('请先点确定再提交！')
        return null
      };
      

      let params = {
        job_id: this.$route.query.job_id,
        code: this.bdvalue,
        type: this.typeList[this.qodeType * 1 - 5],
        qdvalue: this.qodeType === '6' ? this.qdvalue.trim() : ''
      }
      if (this.$route.query.qodeType == '5') {
        params.qudao_emp_name = this.qdName
        params.qdvalue = this.qdCompany
      }
      let res = await this.$api.job.reqCodeNum(params)
      /*res.then((val)=> {
          console.log('code为200', val);
        }).catch((reason) => {
        // on cancel
        console.log('code为201', reason);
        Dialog.confirm({
          title: '操作成功',
          message: '点击确定，可体验近聘（网页版）的更多功能!'
        }).then(() => {
          // on close
          this.$router.replace('/mine');
        }).catch(() => {
          // on cancel
        });
      });*/

      if (res.code === 200) {
        Dialog.confirm({
          title: res.data,
          message: '点击确定，可体验近聘（网页版）的更多功能!'
        })
          .then(() => {
            // on close
            this.$router.replace('/mine')
          })
          .catch(() => {
            // on cancel
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page_staffRollCall {
  width: 100%;
  .jobCard {
    background-color: #ffffff;
    border-bottom: 0.6px solid #e6e6e6;
    margin: 0;
    padding: 9px 10px;
    font-size: 13px;
    color: #848484;
    .job_salary {
      font-size: 14px;
      .job {
        // width:auto;
        font-size: 18px;
        font-weight: bolder;
        color: #030303;
      }
      .salary_mode {
        color: #030303;
        font-weight: bolder;
        text-align: right;
        font-size: 13px;
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
    .jobType_rating {
      font-size: 15px;
      margin: 6px 0;
      color: #030303;
      .salary {
        text-align: right;
        span {
          color: #fc525d;
        }
      }
      .rating {
        text-align: right;
      }
    }
    .address_agencyFee {
      color: #363636;
      .agencyFee {
        text-align: right;
      }
    }
    .address_distance {
      color: #5f5f5f;
      margin: 6px 0;
      .address_work {
        text-align: right;
      }
    }
    .time_status {
      margin-top: 5px;
      flex-wrap: nowrap;
      .status {
        text-align: right;
        white-space: nowrap;
        //   display: flex;
        // flex-direction: column;
        // justify-content: space-between;
      }

      .status_score {
        margin-right: 15px;
      }
      .statusPopup {
        box-sizing: border-box;
        padding: 30px 0px;
        overflow: hidden;
        div {
          display: flex;
          // width: 100%;
          // justify-content: space-around;
          padding: 10px 0;
          border-radius: 10px;
          // margin: 0 5px;
          span {
            text-align: center;
            font-size: 16px;
            user-select: none;
            &:first-child {
              width: 80px;
              border-right: 1px solid #a3a3a3;
            }
            &:last-child {
              margin-left: 10px;
            }
          }
          &.active {
            color: red;
            // background: #f7f7f7;
            box-shadow: 0 0 3px 0 #d2d2d2;
            span {
            }
          }
        }
        button {
          display: flex;
          width: 95%;
          justify-content: center;
          align-items: center;
          margin: 15px auto 5px auto;
          span {
            border: none !important;
          }
        }
      }
    }
    .work_status {
      margin-top: 5px;
      box-sizing: border-box;
      .status {
        white-space: nowrap;
        width: 23%;
        button {
          width: 100%;
          border: 1px solid #1989fa !important;
          background: transparent !important;
          color: #1989fa !important;
          border-radius: 10px;
        }
      }
    }
  }
  .userWorkbench {
    background-color: #ffffff;
    border-radius: 6%;
    .avatar_login {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 16px;
      .userLogin {
        text-align: left;
        .isLogin {
          margin-bottom: 10px;
          font-weight: bold;
          color: #ff2a20;
        }
        .nick_name,
        .account {
          font-size: 14px;
          margin-bottom: 4px;
        }
        .phone {
          font-size: 15px;
        }
      }
    }
    .workbench {
      & .workScore,
      & .agencyScore,
      & .collection,
      & .recentlyView {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-content: center;
        text-align: center;
        .score {
          width: 100%;
          margin-top: 6px;
          margin-bottom: 6px;
        }
        .result {
          width: 100%;
          margin-bottom: 6px;
        }
      }
    }
  }
}
</style>
